<script setup lang="ts">
  import { ref } from "vue"
  const props = defineProps({
    recipeDate: {
      type: Array,
      default: () => [
      ],
    },
    dateList: {
      type: Array,
      default: () => []
    }
  })
  watch(
    () => props.dateList,
    (val) => {
      console.log(val, 'props');
    },
    {
      immediate: true,
      deep: true
    }
  )
  const emits = defineEmits([''])
  watch(() => props.recipeDate, (val) => {

    if (props.recipeDate[0]) {
      console.log(props.recipeDate[0], 1111);
      props.recipeDate[0].timesDataList.forEach((it, index) =>
        expandList.value[index] = {
          id: index,
          expand: true
        }
      )

    }
  },
    {
      immediate: true,
      deep: true
    }
  );
  const expandList = ref([])
  const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const changeExpand = (index) => {
    expandList.value[index].expand = !expandList.value[index].expand
  }
  const onReset = () => {
    expandList.value.forEach(element => {
      element.expand = true
    });
  }
  // 当操作按钮触发
  const onChange = (type, val, index, i, ind) => {
    console.log(index);

    if (type == '删除') {
      val.dishList.splice(ind, 1);
    }
    if (type == '清空') {
      val.dishList = []
    }
    if (index !== '') {
      val.planDate = props.dateList[index].date
    }
    if (['修改', '详情'].includes(type)) {
      emits('onChange', { type, val, i })
    } else {
      emits('onChange', { type, val, i })
    }

  }
  defineExpose({ onReset })
</script>

<template>
  <div class="weeklyRecipeTable">
    <div class="flex heard">
      <div class="heard-item">餐段</div>
      <div class="heard-item flex-1" v-for="item in dateList" :key="item.date">{{`${weekList[item.week]}
        (${item.date})`}}
      </div>
    </div>
    <div class="content">
      <div class="content-td ">
        <div class="content-tr  items-center"
          style="border-left: 1px solid var(--pb-color-light-4);justify-content: center;"
          :class="expandList[index].expand ? 'flex-1' : ''" v-for="(it,index) in recipeDate[0]?.timesDataList"
          :key="item?.mealTimesCode">
          <div class="flex items-center" style="cursor: pointer;height: 38px;" @click="changeExpand(index)">
            <pb-icon name="bottom" size="12" class="mr-1 downIcon"
              :class="expandList[index].expand ? 'down' : ''"></pb-icon>
            <div>{{it.mealTimesName}}</div>
          </div>
        </div>
      </div>
      <div class="content-td flex-1" v-for="(item,inde) in recipeDate">
        <div class="content-tr " v-for="(it,index) in item.timesDataList" :key="item.mealTimesCode"
          :class="expandList[index].expand ? 'flex-1' : ''">

          <el-scrollbar class="dishBox" v-if="expandList[index].expand">
            <div class="dishBox-heard flex">
              <div style="flex: 2">菜品</div>
              <div style="flex: 1.2;text-align: end;">单价(元)</div>
              <div class="flex-1" style="text-align: end;">份数</div>
            </div>

            <div class="flex" v-for="(i,ind) in it.dishList" ::key="i.dishCode">

              <div style="flex: 2.3" class="dishName">{{i.dishName}}</div>

              <div style="flex: 1.2; color: var( --pb-color-primary); text-align: end;">{{i.dishSellPrice}}
              </div>
              <div class="flex-1" style="text-align: end; ">{{i.dishCopies}}</div>
            </div>

          </el-scrollbar>

          <div v-else></div>
          <div class="flex justify-center operate">
            <div class="flex items-center num">
              <span> {{it.dishCopiesTotal}}</span>份
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .weeklyRecipeTable {
    color: var(--pb-color-light-8);

    border-right: 0px;
    border-radius: 4px;
    height: 100%;
  }

  .heard {
    /* height: 100px; */
    border-top: 1px solid var(--pb-color-light-4);
    border-left: 1px solid var(--pb-color-light-4);
  }

  .heard-item {
    width: 80px;
    height: 40px;
    /* line-height: 40px; */
    padding: 9px 16px;
    /* text-align: center; */
    /* width: 256px; */
    background-color: var(--pb-color-light-2);
    border-right: 1px solid var(--pb-color-light-4);
  }

  .content {
    height: calc(100% - 60px);
    color: var(--pb-color-light-1);
    font-weight: 400;
  }

  .content-td {
    display: flex;
    flex-direction: column;
    width: 80px;


  }

  .content-tr {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 50px;
    overflow: hidden;
    transition: all 0.5s;

    border-right: 1px solid var(--pb-color-light-4);
    border-bottom: 1px solid var(--pb-color-light-4);
  }

  .dishBox {
    height: calc(100% - 38px);
    overflow: auto;
  }

  .content {
    display: flex;
  }

  .dishBox {
    padding: 12px 16px;
  }

  .dishBox-heard {
    color: var(--pb-color-light-7);
  }

  .downIcon {
    transition: all 0.5s;

  }

  .down {
    transform: rotate(180deg);
  }

  .operate {
    height: 38px;
    padding: 0 16px;
    background: #FFFFFF;
    box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.02), 0px -4px 12px 0px rgba(0, 0, 0, 0.03);

    .num {
      font-size: 14px;
      /* overflow: hidden; */
      width: 37px;
    }
  }

  .dishName:hover {
    cursor: pointer;
    color: var(--pb-color-primary);
    text-decoration: underline;
  }
</style>